<template>
  <div class="banner">
      <!-- 轮播图主体 -->
      <div class="banner-wrap">
         <div v-for="(item, index) in banner" :key="index" :style="{'backgroundImage': `${item.color}`}" :class="['banner-item', {'active': step === index}]" >
           <div class="container">
             <div class="container-wrap">
               <div class="text-wrap">
                 <h1>SplashDrone 3+</h1>
                 <p class="title">The world’s first waterproof quadcopter</p>
                 <div class="operation">
                  <a :href="item.learn">Learn More ></a>
                  <a :href="item.buy">Buy ></a>
                 </div>
               </div>
               <div class="img-wrap">
                 <img src="~/static/banner0SD3+PL3-2.png" alt="">
               </div>
             </div>
           </div>
         </div>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
        banner: [
          {
            color: '-webkit-linear-gradient(top,#101013,#3b3d40)',
            title: '',
            learn: '/waterproof-splash-drone.html',
            buy: 'https://store.swellpro.com/products/splashdrone-3-waterproof-base-platform'
          },
          {
            color: '-webkit-linear-gradient(top,#707c87,#98a6b3)', 
            title: '',
            learn: '/spry.html',
            buy: 'https://store.swellpro.com/products/spry-sports-drone'
          },
        ],

        
        Timer:null, // 轮播时间
        step: -1, // 当前轮播图序号
    };
  },

  mounted() {
    // 保证第一个banner也能有相应的动画
    setTimeout(() => {
      this.run()
    }, 50);

    // 开始轮播
    this.Timer = setInterval(()=> {
      this.run()
    }, 4000)
  },

  methods: {
    /**
    * 轮播图开始轮播
    * @param { Boolean } flag true => 向右轮播 false => 向左轮播
    */
    run(flag = true) {
      const step = this.step
      const { length } = this.banner

      if (flag) { // 向右轮播
        this.step = step === length - 1 ? 0 : this.step + 1
      } else { // 向左轮播
        this.step = step === 0 ? length - 1 : this.step - 1
      }
    }

  }
}

</script>
<style lang='stylus' scoped>
.banner
    height 740px
    overflow hidden
    position relative
    &-wrap
        position absolute
        width 100%
        height 740px
        left 0px
        top 0px
        z-index 1
        &-back
            position absolute
            width 100%
            height 100%
            top 0px
            left 0px
            transition opacity .6s ease-out
            background-repeat 50%
            background-size cover
    &-item
      position absolute
      left 0
      top 0
      width 100%
      height 100%
      z-index 2
      transition opacity .3s ease-out
      background-repeat no-repeat
      background-position 50%
      background-size cover
      opacity 0
      color #fff
      .container
        display flex
        justify-content center
        height 100%
        &-wrap
          position relative
          width 100%
          height 100%
          color #fff
          box-sizing border-box
          padding-top 154px
          display flex
          justify-content center
          .text-wrap
            opacity: 0
            transform translate3d(0,-50px,0)
            transition all .7s ease-in-out
            h1
              text-align center
              font-size 38px
              font-weight 400
            .title
              text-align center
              font-size 24px
              font-weight 300
            .operation
              display flex
              justify-content center
              padding-top 6px
              a
                color #f26444
                margin-right 20px
                font-size 18px
                font-weight 300
          .img-wrap
            position absolute
            bottom 0px
            display flex
            justify-content center
            width 100%
            img
              display block
              transition all .7s ease-in-out
              opacity: 0
              transform translate3d(0,150px,0)
    .active
      z-index 3
      opacity 1
      .container
        &-wrap
          .img-wrap
            img
              opacity 1
              transform translate3d(0,0,0)
          .text-wrap
            opacity 1
            transform translate3d(0,0,0)
</style>